<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>往学期课程</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 搜索工具 -->
  <div  class="search-container" style="margin: 40px 0 0 0">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item prop="cid">
        <el-input v-model="searchFormModel.cid" placeholder="请输入课程号" clearable />
      </el-form-item>
      <el-form-item prop="tid">
        <el-input v-model="searchFormModel.tid" placeholder="请输入教师编号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchOnSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!-- 数据表格 -->
  <div style="margin:10px 20px 20px 20px">
    <el-table :data="tableCourse" stripe border style="width: 100%">
      <el-table-column prop="cid" label="课程号"  align="center"/>
      <el-table-column prop="cname" label="课程名" align="center"/>
      <el-table-column prop="tname" label="任课教师" align="center"/>
      <el-table-column prop="ltime" label="上课时间" align="center"/>
      <el-table-column prop="location" label="上课地点" align="center"/>
      <el-table-column prop="chour" label="课时数" align="center"/>
    </el-table>
  </div>

  <!-- 分页 -->
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElDialog } from 'element-plus';
import request from '@/utils/class';

////////////////  表格  ///////////////////////
onMounted(()=>{
  getCourse();
})

//表格信息显示
const tableCourse=ref([])
let  totals=ref(0)
const getCourse=()=> {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };

  // 判断是否有搜索条件，如果有，则添加到请求参数中
  if (searchFormModel.cid && searchFormModel.cid.trim() !== '') {
    params.cid = searchFormModel.cid.trim();
  }
  if (searchFormModel.tid && searchFormModel.tid.trim() !== '') {
    params.tid = searchFormModel.tid.trim();
  }

  request({
    url: '/course/allH',
    method: 'get',
    params,
  }).then(req => {
    console.log(req)
    console.log(req.data)
    if (200 == req.data.errorCode) {
      tableCourse.value = req.data.data.records;
      totals.value = req.data.data.total;
    }
  })
}

//分页
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val;
  getCourse()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value=val;
  getCourse()
}

//////////////搜索框/////////////////////////
const searchFormRef=ref()

const searchFormModel=reactive({
  cid:''
})

const searchOnSubmit=()=>{
  getCourse();
}

const searchOnReset=()=>{
  searchFormModel.cid=''
}
</script>

<style scoped>
.el-breadcrumb {
  font-size: 18px;
  margin: 20px;
}
/* 分页居中样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px auto; /* 根据需要调整外边距 */
}
</style>